<template>
    <div class="height-100 flex home-box">
        <div class="home-box-menu">
            <menuNav>
                <template #navTop>
                    <div class="padding-tb-10 padding-lr-10 color-fff font-size-28 flex align-items-center animate__animated animate__bounceInLeft"
                        style="border-bottom: 1px solid #f7f7f7;">
                        <el-image :src="logoImage" fit="contain" v-if="logoImage" style="width:40px;height: 40px;" />
                        <div class="margin-l-10 text-hide" style="letter-spacing: 0.2rem;" v-if="!isOpen">中塔PM</div>
                    </div>
                </template>
            </menuNav>
        </div>
        <div class="flex-1 flex flex-direction-column home-box-content overflow-hidden">
            <div class="content-header">
                <homeHeader class="animate__animated animate__fadeInRightBig" />
            </div>
            <div class="flex-1 overflow-hidden main-home-content position-relative" id="main-home-content">
                <el-tabs :model-value="tabIndex" :closable="editableTabs.length !== 1" @tab-remove="removeTab" type="card"
                    class="flex-1 animate__animated animate__fadeInUpBig" @tab-change="tabChange" addable>
                    <template #addIcon>
                        <el-dropdown trigger="click">
                            <el-icon style="font-size:16px"><ArrowDown /></el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="item in dropDownList" :key="item.value"
                                    @click="dropDownChange(item)" :disabled="item.disabled">
                                    {{ item.label }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                    <template v-for="item in editableTabs">
                        <el-tab-pane :label="item.title" :name="item.name">
                            <router-view v-slot="{ Component, route }" class="padding-lr-12 padding-b-12 height-100">
                                <transition name="fade-slide" mode="out-in" appear>
                                    <keep-alive>
                                        <component :is="Component" :key="route.name" v-if="tabIndex === item.name"
                                            class="screenfull-box">
                                        </component>
                                    </keep-alive>
                                </transition>
                            </router-view>
                        </el-tab-pane>
                    </template>
                </el-tabs>
              
            </div>
        </div>
    </div>
</template>

<script setup>

import menuNav from './components/menu-nav.vue';
import homeHeader from './components/home-header.vue';
import { storeToRefs } from 'pinia';//实现仓库数据双向绑定
import { useStore } from '@/store/index'//引入store
const store = useStore();
const router = useRouter();
const tabIndex = ref('')
const editableTabs = ref([])

const dropDownList = ref([
    { label: '重新加载', value: 'reload', disabled: false },
    { label: '关闭当前', value: 'closeCurrent', disabled: false },
    { label: '关闭其他', value: 'closeOther', disabled: false },
    { label: '关闭所有', value: 'closeAll', disabled: false },
    { label: '关闭左侧', value: 'closeLeft', disabled: false },
    { label: '关闭右侧', value: 'closeRight', disabled: false }
])
// 收起 展开  利用计算属性
const isOpen = computed(() => {
    let { isCollapse } = storeToRefs(store);//解构赋值，数据双向绑定，关联store
    return isCollapse.value
})
const shouldCache = (keepAlive) => {
    return keepAlive !== false;
};

// 监听当前路由
watch(
    () => router.currentRoute.value,
    (val, from) => {
        if (from) {
            // router.removeRoute(from.name);
        }

        const obj = {
            title: val.meta.title,
            name: val.path,
        }
        tabIndex.value = val.path //当前路径赋值
        if (store.tabsMenuList) {
            editableTabs.value = store.tabsMenuList
        }

        // 判断是否已经添加了
        const result = editableTabs.value.find(obj => obj.name === val.path)

        if (!result) {
            editableTabs.value.push(obj)
        }
        // 存储tabs标签
        store.setTabsMenuList(editableTabs.value)
        setDropDownList(editableTabs.value)
    },
    { immediate: true }
)

// 监听tabs标签数量改变
watch(
    () => editableTabs.value,
    (val) => {
        setDropDownList(val)
    }, {
    immediate: true,
})

// 设置tabs下拉标签属性
function setDropDownList(val) {
    let arrs = ['closeAll', 'closeCurrent', 'closeOther', 'closeLeft', 'closeRight']
    dropDownList.value.forEach(item => {
        item.disabled = false
        // 判断是否只是只有一个tabs   只有一个则禁用掉 关闭所有 跟关闭当前与关闭其他选项
        if (val.length <= 1 && (arrs.includes(item.value))) {
            item.disabled = true
            // console.log('最后一个tab', val.length)
        }
    })
    val.forEach((ele, index) => {
        // 判断是否有前一个tab 没有则禁用关闭左侧
        if (ele.name == tabIndex.value && index == 0) {
            dropDownList.value.forEach(item => {
                if (item.value == 'closeLeft') {
                    item.disabled = true
                }
            })
        }
        // 判断是否有后一个tab 没有则禁用关闭右侧
        if (ele.name == tabIndex.value && index == editableTabs.value.length - 1) {
            dropDownList.value.forEach(item => {
                if (item.value == 'closeRight') {
                    item.disabled = true
                }
            })
        }
    })
}

// tabs 点击
async function tabChange(e) {
    await nextTick();
    await router.replace(e);
}

// 删除tab
async function removeTab(currentTab) {
    let tabs = editableTabs.value;
    let currTabIndex = tabIndex.value;
    //如果当前路径和你要删除的路径一致
    if (currentTab == currTabIndex) {
        tabs.forEach((tab, index) => {
            //要删除的路径和editableTabs的路径匹配
            if (tab.name == currentTab) {
                const nextTab = tabs[index + 1] || tabs[index - 1];
                //如果存在，获取nextTab路径
                if (nextTab) {
                    currTabIndex = nextTab.name;
                }
            }
        });
    }
    //重新赋值tabIndex
    tabIndex.value = currTabIndex;
    //过滤删除后的editableTabs
    editableTabs.value = editableTabs.value.filter((tab) => tab.name != currentTab);
    store.setTabsMenuList(editableTabs.value)
}

// 右侧下拉点击
function dropDownChange(item) {
    switch (item.value) {
        case 'reload'://重新加载当前页面
            window.location.reload();
            break;
        case 'closeCurrent'://关闭当前
            removeTab(tabIndex.value);
            break;
        case 'closeOther'://关闭其他
            editableTabs.value.forEach((tab) => {
                if (tab.name != tabIndex.value) {
                    removeTab(tab.name);
                }
            });
            break;
        case 'closeAll'://关闭所有
            // 删除tabs所有标签，并重定向到主页
            editableTabs.value = [];
            store.setTabsMenuList([])
            router.replace({ path: '/' });
            break;
        case 'closeLeft'://关闭左侧
            for (let i = 0; i < editableTabs.value.length; i++) {
                if (editableTabs.value[i].name == tabIndex.value) {
                    if (i == 0) {
                        break;
                    }
                    const nextTab = editableTabs.value[i - 1];
                    removeTab(nextTab.name);
                    break;
                }
            }
            break;
        case 'closeRight'://关闭右侧
            for (let i = 0; i < editableTabs.value.length; i++) {
                if (editableTabs.value[i].name == tabIndex.value) {
                    if (i == editableTabs.value.length - 1) {
                        break;
                    }
                    const nextTab = editableTabs.value[i + 1];
                    removeTab(nextTab.name);
                }
            }
            break;
    }
}

// logo
const logoImage = ref('')


</script>

<style lang='scss' scoped>
.home-box {
    .home-box-menu {
        // width: 210px;
        // background-color: #304156;
    }

    .home-box-content {
        .main-home-content {
           
        }
    }
}
</style>

<style lang="scss">
.home-box {
    .el-tabs {
        height: 100%;
        display: flex;
        flex-direction: column;

        .el-tabs__header {
            margin: 0 !important;

            .el-tabs__nav-wrap {
                // padding: 0 5px;
                box-sizing: border-box;

                // .el-tabs__item:hover {
                //     .is-icon-close {
                //         width: 14px;
                //     }
                // }

                // .is-icon-close {
                //     width: 0;
                // }
            }

            .el-tabs__new-tab{
                margin:10px;
            }
        }

        .el-tabs__content {
            flex: 1;

            .el-tab-pane {
                height: 100%;
            }
        }
    }
}

/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

/* 路由 */
.fade-slide-leave-active,
.fade-slide-enter-active {
    transition: all 0.3s;
}

.fade-slide-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-slide-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>